<template>
    <div class="body addres_list">
        <div class="floor my p edit">
            <form>
                <div class="content">
                    <div class="floor list7">
                        <div class="myorder p">
                            <div class="content30">
                                <a href="javascript:void(0)">
                                    <div class="order">
                                        <div class="fl">
                                            <span>收货人:</span>
                                        </div>
                                        <div class="fl">
                                            <input
                                                v-model="addresInfo.consignee"
                                                type="text"
                                                name="consignee"
                                                placeholder="请输入姓名"
                                                autocomplete="off"
                                            />
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="myorder p">
                            <div class="content30">
                                <a href="javascript:void(0)">
                                    <div class="order">
                                        <div class="fl">
                                            <span>手机号:</span>
                                        </div>
                                        <div class="fl">
                                            <input
                                                type="tel"
                                                v-model="addresInfo.mobile"
                                                name="mobile"
                                                @keyup="
                                                    addresInfo.mobile.replace(
                                                        /[^\d]/g,
                                                        ''
                                                    )
                                                "
                                                autocomplete="off"
                                                placeholder="请输入手机号码"
                                            />
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="myorder p">
                            <div class="birth">
                                <van-field
                                    v-model="fieldValue"
                                    is-link
                                    readonly
                                    label="地区"
                                    placeholder="请选择所在地区"
                                    @click="ischeckCity = !ischeckCity"
                                />
                            </div>
                        </div>
                        <div class="myorder p">
                            <div class="content30">
                                <a href="javascript:void(0)">
                                    <div class="order">
                                        <div class="fl">
                                            <span>详细地址:</span>
                                        </div>
                                        <div class="fl">
                                            <input
                                                type="text"
                                                v-model="addresInfo.address"
                                                name="address"
                                                placeholder="请输入详细地址"
                                                autocomplete="off"
                                            />
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="myorder p">
                            <div class="content30">
                                <a href="javascript:void(0)">
                                    <div class="order">
                                        <div class="fl">
                                            <span>标签:</span>
                                        </div>
                                        <div class="fl j_biaoqian">
                                            <span
                                                :class="{
                                                    j_biaoqianactive: biaoqian,
                                                }"
                                                @click="biaoqian = !biaoqian"
                                                >家</span
                                            >
                                            <span
                                                :class="{
                                                    j_biaoqianactive: !biaoqian,
                                                }"
                                                @click="biaoqian = !biaoqian"
                                                >公司</span
                                            >
                                        </div>
                                    </div>
                                </a>
                            </div>
                        </div>
                        <div class="myorder p">
                            <div class="content30">
                                <a href="javascript:void(0)">
                                    <div class="order orderli">
                                        <div class="fl">
                                            <span>设为默认地址</span>
                                        </div>
                                        <van-switch
                                            v-model="switchChecked"
                                            size="20"
                                            @click="
                                                switchChecked = !switchChecked
                                            "
                                        />
                                    </div>
                                </a>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>

        <div
            class="isdelete"
            @click="deleAddres()"
            v-show="this.$route.query.address_id"
        >
            <img src="../../assets/images/dele.png" alt="" />
        </div>

        <div class="j_newbutton">
            <div class="j_newbtn" @click="saveAddres()">保存地址</div>
        </div>

        <!-- 地址选择组件 -->
        <component
            :is="'Addres'"
            v-if="ischeckCity"
            @checkAddresData="checkAddresfn"
            @closeAddresProps="closeAddresPropsfn"
        ></component>
        <div class="zhanwei"></div>
    </div>
</template>

<script>
import { axiosPost } from '../../axios';
import { Toast, Dialog } from 'vant';
export default {
    name: '',
    data() {
        return {
            addresInfo: {
                consignee: '',
                mobile: '',
                address: '',

                province: '',
                city: '',
                district: '',
            },
            ischeckCity: false,

            inputstate: true,

            cascaderCity: false,
            fieldValue: '',
            cascaderValue: '',
            options: [],

            switchChecked: true,
            biaoqian: true,
        };
    },
    computed: {},
    mounted() {
        if (this.$route.query.address_id) {
            this.getAddresdetail();
        }
    },
    methods: {
        // 关闭地址选择
        closeAddresPropsfn(data) {
            this.ischeckCity = data;
        },
        // 地址选择回调
        checkAddresfn(selectedOptions) {
            this.fieldValue = selectedOptions
                .map((option) => option.text)
                .join(' ');
            this.addresInfo.province = selectedOptions[0].value;
            this.addresInfo.city = selectedOptions[1].value;
            this.addresInfo.district = selectedOptions[2].value;
        },
        // 删除地址
        deleAddres() {
            Dialog.confirm({
                title: '',
                message: '您真的要删除吗？',
            })
                .then(() => {
                    axiosPost(
                        '/api/user/del_address',
                        {
                            id: this.$route.query.address_id,
                        },
                        (res) => {
                            Toast({
                                message: res.msg,
                                duration: 2000,
                            });
                            if (res.status != 1) {
                                return;
                            }
                            setTimeout(() => {
                                this.$router.go(-1);
                            }, 2000);
                        }
                    );
                })
                .catch(() => {
                    // on cancel
                });
        },
        // 打开省市县级联选择
        getAddresdetail() {
            axiosPost(
                '/api/user/get_address',
                {
                    id: this.$route.query.address_id,
                },
                (res) => {
                    if (res.status != 1) {
                        return Toast({
                            message: res.msg,
                            duration: 2000,
                        });
                    }
                    this.addresInfo = res.data;
                    this.switchChecked =
                        res.data.is_default == 0 ? false : true;
                    this.biaoqian = res.data.type == 1 ? true : false;
                    this.fieldValue =
                        res.data.province_name +
                        ' ' +
                        res.data.city_name +
                        ' ' +
                        res.data.district_name;
                }
            );
        },
        // 提交收获地址
        saveAddres() {
            // console.log(this.addresInfo);
            if (
                !this.addresInfo.consignee ||
                !this.addresInfo.address ||
                !this.addresInfo.mobile
            ) {
                return Toast({
                    message: '请补全信息',
                    duration: 2000,
                });
            }
            if (
                !/^1[3456789]\d{9}$/.test(
                    this.addresInfo.mobile.replace(/\s+/g, '')
                )
            ) {
                return Toast({
                    message: '请输入正确的手机号码',
                    duration: 2000,
                });
            }
            if (this.inputstate) {
                this.inputstate = false;
                setTimeout(() => {
                    this.inputstate = true;
                }, 1000);
            }

            let addresobj = {
                consignee: this.addresInfo.consignee,
                mobile: this.addresInfo.mobile,
                address: this.addresInfo.address,
                province: this.addresInfo.province,
                city: this.addresInfo.city,
                district: this.addresInfo.district,
                type: this.biaoqian == true ? 1 : 2,
                is_default: this.switchChecked == true ? 1 : 0,
            };

            let url = '/api/user/add_address';

            if (this.$route.query.address_id) {
                addresobj.id = this.$route.query.address_id;
                url = '/api/user/edit_address';
            }

            axiosPost(url, addresobj, (res) => {
                Toast({
                    message: res.msg,
                    duration: 2000,
                });
                if (res.status != 1) {
                    return;
                }

                setTimeout(() => {
                    if (this.$route.query.isgoSubmit) {
                        this.$router.push({
                            path: '/shopSubmit',
                            query: { address_id: res.result },
                        });
                    } else {
                        this.$router.go(-1);
                    }
                }, 1000);
            });
        },
    },
};
</script>

<style lang="less" scope>
.addres_list {
    .isdelete {
        position: fixed;
        top: 0;
        right: 0.52667rem;
        width: 0.938rem;
        height: 2.0907rem;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 999;
        img {
            width: 100%;
        }
    }

    .list7 .myorder {
        overflow: hidden;
    }
    .van-cell {
        padding: 0 0;
        height: 1.92rem;
        line-height: 1.92rem;
    }
    .van-field__label {
        font-size: 0.64rem;
        margin-right: auto;
        font-weight: normal;
        width: auto;
        margin-left: 0.2rem;
        color: #323233;
    }
    .van-cell--borderless::after,
    .van-cell:last-child::after {
        display: none;
    }

    .van-icon-arrow::before {
        display: none;
    }

    .van-cell__value {
        float: right;
        margin-right: 1rem;
    }

    .van-field__body {
        height: 1.89867rem;
        outline: none;
        width: 9.9rem;
        padding: 0 0.21333rem;
        font-size: 0.5973rem;
        border: 0;
        float: right;
    }

    .van-field__control:read-only {
        cursor: default;
        padding: 0 0.1333rem;
        border: 0;
        text-align: left;
    }

    .van-field__control:read-only::placeholder {
        color: #999;
    }

    .van-switch {
        height: 1.06667rem;
        width: 1.92rem;
        font-size: 30px;
        border-radius: 0.5333rem;
    }

    .van-switch--on {
        background-color: #f23030;
    }

    .van-switch--on .van-switch__node {
        -webkit-transform: translateX(0.8533rem);
        transform: translateX(0.8533rem);
    }

    .van-switch__node {
        width: 1.06667rem;
        height: 1.06667rem;
    }

    .orderli {
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .j_newbutton {
        position: fixed;
        left: 0;
        bottom: 0.5rem;
    }

    .area_roll {
        width: 100%;
    }

    .address_container {
        position: fixed;
        width: 100%;
        bottom: -10.8rem;
        padding: 0 3%;
        background: #fff;
        z-index: 999999;
        font-size: 0.64rem;
    }

    .cascaderCity_text {
        float: left;
        display: block;
        padding: 0.8em 0;

        margin: 0px 1em 0 0;
    }

    .sel_cascaderCity {
        border-bottom: 2px solid red;
        color: red;
    }

    .no_sel {
        border-bottom: '';
        color: #000;
    }

    .close_add {
        float: right;
        display: block;
        padding: 0.8em;
        color: #999;
    }

    .sel_info {
        padding: 1em 0;
        border-top: 1px solid #e5e5e5;
        color: #666;
    }

    .Mrightt {
        float: right;
        width: 0.2033rem;
        height: 0.3733rem;
        margin-top: -0.8em;
        margin-right: 1em;
    }

    .add_select {
        height: 9rem;
        bottom: 0px;
        overflow: auto;
    }

    .city-list2,
    .province-list2,
    .area-list2,
    .twon-list2 {
        animation: bounceInLeft 1s 1;
    }

    @keyframes bounceInLeft {
        0% {
            /*opacity: 0;*/
            transform: translate3d(100px, 0, 0);
        }

        25% {
            /*opacity: 1;*/
            transform: translate3d(10px, 0, 0);
        }

        50% {
            transform: translate3d(5px, 0, 0);
        }

        75% {
            transform: translate3d(1px, 0, 0);
        }

        100% {
            transform: translate3d(0, 0, 0);
        }
    }

    .my {
        margin-bottom: 2.56rem;
        width: 15.1467rem;
        background: #ffffff;
        margin: 0.4267rem auto;
        border-radius: 0.4267rem;
    }

    .myorder .order div:nth-child(2) {
        float: right;
        margin-right: 1rem;
    }

    .myorder .order .fr {
        margin-top: 0rem;
        float: right;
    }

    .j_biaoqian {
        height: 1.89867rem;
        outline: none;
        width: 9.81333rem;
        padding: 0 0.21333rem;
        font-size: 0.68267rem;
        border: 0;
    }

    .j_biaoqian span {
        width: 1.28rem;
        height: 0.64rem;
        border: 1px solid #858585;
        border-radius: 0.448rem;
        font-size: 0.512rem;
        font-weight: normal;
        color: #aaaaaa;
        padding: 0.0853rem 0.3347rem;
        margin-right: 0.1rem;
    }

    .j_biaoqian .j_biaoqianactive {
        border: 1px solid #ff9a1e;
        color: #fff;
        background: #ff9a1e;
    }

    .edita {
        width: 13.0133rem;
        height: 2.1333rem;
        text-align: center;
        position: fixed;
        bottom: 1.28rem;
        cursor: pointer;
        left: 1.472rem;
        overflow: hidden;
        right: auto;
        margin: auto;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .edita input {
        width: 100%;
        font-size: 0.7253rem;
        color: white;
        background-color: #f23030;
        border-radius: 1.0667rem;
        text-align: center;
        line-height: 2.1333rem;
        display: block;
        cursor: pointer;
        margin: 0;
        height: 2.1333rem;
    }
}
</style>
